<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 百分比    %   、   vw vh
        %相对父元素    vw、vh相当于浏览器宽度
         */

        /* 弹性盒子
        display:flex

        父元素
        flex-direction 设置主轴方向
        justify-content   设置主轴排列方式
        align-itmes     单行 设置侧轴排列方式
        align-content   多行  设置侧轴排列方式
        flex-wrap  换行
        flex-flow   复合属性  同时设置主轴方向以及是否换行

        子元素
        flex  设置多余部分如何分配
        order  设置子元素排列顺序
        align-self  设置单个子元素侧轴排列方式
         */
        div{
            display: flex;
        }
    </style>
</head>
<body>
    <div></div>
    m
</body>
</html>